import React from "react";
import styles from "./App.less";
import { hot } from 'react-hot-loader/root';
const winSteps = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currIndex: -1,
      steps: [{ index: -1 }],
      winResult: -1,
    };
  }

  gotoStep(index) {
    const { steps } = this.state;

    this.setState({
      currIndex: index,
      steps: [...steps.slice(0, index + 2)],
      winResult: -1,
    })
  }

  /**
   * -1没人胜利,0为X胜利,1为O胜利
  */
  gameCheckWin() {
    const xSteps = this.state.steps.filter(s => s.index !== -1 && s.index % 2 === 0);
    const oSteps = this.state.steps.filter(s => s.index !== -1 && s.index % 2 !== 0);
    if (xSteps.length < 3 && oSteps.length < 3) {
      //都没走到三步,都不用检测,游戏未结束
      return -1;
    }
    let xHasWin = false;
    let oHasWin = false;
    //检测胜利的所有组合,是否有满足的
    winSteps.forEach(scomps => {
      //这个组合,找不到不包含的(即都在里面),则表示有这个胜利组合
      if (xHasWin || oHasWin) return false;
      xHasWin = !scomps.find(move => !xSteps.find(x => x.move === move));
      oHasWin = !scomps.find(move => !oSteps.find(x => x.move === move));
    });
    if (xHasWin) return 0;
    if (oHasWin) return 1;
    return -1;
  }

  gameMove(move) {
    const { currIndex, steps } = this.state;
    const step = {
      index: currIndex + 1,
      move: move,
    };
    steps.push(step);

    const winResult = this.gameCheckWin();

    this.setState({
      winResult,
      currIndex: step.index,
      steps,
    })
  }

  getPlayerByIndex(index) {
    return index % 2 === 0 ? 'X' : 'O';
  }

  render() {
    console.log('styles',styles);
    const { currIndex, steps, winResult } = this.state;
    const stepsX = steps.map(s => (
      <button type="button" key={s.index} onClick={() => this.gotoStep(s.index)}>
        Go To {s.index === -1 ? 'GameStart' : `move #${s.index}`}
      </button>
    ));
    const buttons = [0, 1, 2, 3, 4, 5, 6, 7, 8].map(move => {
      const moveIndex = steps.find(s => s.move === move)?.index;
      const hasMove = typeof (moveIndex) !== 'undefined';
      return (<button type="button" key={move} className={styles.gameGrid}
        onClick={(() => !hasMove && (winResult === -1) && this.gameMove(move))}>
        {hasMove ? this.getPlayerByIndex(moveIndex) : ''}
      </button>);
    });
    return (
      <div className={styles.wrap}>
        <div className={styles.left}>
          <div className={styles.gameWrap}>{buttons}</div>
        </div>
        <div className={styles.right}>
          <div className={styles.rightTitle}>
            {winResult === -1 ?
              (
                <span>Next Player: {this.getPlayerByIndex(currIndex + 1)}</span>
              ) : (
                <span>Winner: {this.getPlayerByIndex(winResult)} !</span>
              )}
          </div>
          <div className={styles.rightSteps}>{stepsX}</div>
        </div>
      </div>
    );
  }
}

export default hot(App);
